<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>登录</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description"
          content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="./css/bootstrap.min.css?v=3.3.7" rel="stylesheet">
    <link href="./css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="./css/animate.css" rel="stylesheet">
    <link href="./css/style.css?v=4.1.0" rel="stylesheet">
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html"/>
    <![endif]-->
    <script>if (window.top !== window.self) {
        window.top.location = window.location;
    }</script>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入加密 -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="./js/jsencrypt.min.js"></script>
    <script src="./js/axios.min.js"></script>
</head>

<body class="gray-bg">

<div id="app" style="width: 350px" class="middle-box text-center loginscreen animated fadeInDown">
    <div>
        <div>
            <h1 class="logo-name">云</h1>
        </div>
        <h3>欢迎使用</h3>
        <el-tabs type="card" stretch>
            <el-tab-pane label="用户名登录">
                <form class="m-t" role="form" v-on:submit.prevent>
                    <div class="form-group">
                        <input type="text" class="form-control" v-model="username" placeholder="用户名"
                               required="请输入用户名" @submit="loginByUsername()">
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" v-model="password" placeholder="密码"
                               required="请输入密码">
                    </div>
                    <div class="form-group" v-show="ifShowVerCode">
                        <div class="input-group">
                            <input type="text" class="form-control" v-model="verCode" placeholder="验证码">
                            <span class="input-group-addon no-padding"><img
                                    :src="captcha" height="32"></span>
                        </div>
                    </div>
                    <button @click="logByUsername" class="btn btn-primary block full-width m-b">登 录</button>
                    <a href="register.html">注册一个新账号</a>
                </form>
            </el-tab-pane>
            <el-tab-pane label="邮箱登录">
                <form class="m-t" role="form" v-on:submit.prevent>
                    <div class="form-group">
                        <input type="text" class="form-control" v-model="username" placeholder="用户名"
                               required="请输入邮箱" @submit="getUserMessage()">
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" style="width: 240px" class="form-control" v-model="verCode"
                                   placeholder="验证码">
                            <el-button style="height: 34px; width: 110px" plain>发送验证码</el-button>
                        </div>
                    </div>
                    <button @click="" class="btn btn-primary block full-width m-b">邮箱登录</button>
                    <a href="register.html">注册一个新账号</a>
                </form>
            </el-tab-pane>
            <el-tab-pane label="手机登录">
                <form class="m-t" role="form" v-on:submit.prevent>
                    <div class="form-group">
                        <input type="text" class="form-control" v-model="username" placeholder="用户名"
                               required="请输入手机号" @submit="getUserMessage()">
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" style="width: 240px" class="form-control" v-model="verCode"
                                   placeholder="验证码">
                            <el-button style="height: 34px; width: 110px" plain>发送验证码</el-button>
                        </div>
                    </div>
                    <button @click="" class="btn btn-primary block full-width m-b">电话登录</button>
                    <a href="register.html">注册一个新账号</a>
                </form>
            </el-tab-pane>
        </el-tabs>
    </div>
</div>

<!-- 全局js -->
<!--<script src="js/jquery.min.js?v=2.1.4"></script>-->
<!--<script src="js/bootstrap.min.js?v=3.3.7"></script>-->
<!--<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>-->

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                username: "jiange",
                password: "jianjian",
                verCode: "",
                ifShowVerCode: false,

                // common
                publicKeyUUID: "",
                captchaUUID: "",
                captcha: "",
                publicKey: ""
            }
        },
        methods: {
            // 信息弹窗
            showMessages(message, type) {
                this.$message({
                    message: message,
                    type: type,
                });
            },
            // 超前登录
            preLogin() {
                let token = localStorage.getItem('userLogging');
                if (token === null) {
                    return;
                }
                axios.get('http://localhost:80/getToken?token=' + token)
                    .then(res => {
                        if (res.data.code !== 20000) {
                            // token 过期时，清除 localStorage
                            if (token !== null) {
                                localStorage.removeItem('userLogging');
                            }
                        } else {
                            this.showMessages('一键登录', 'success');
                            setTimeout(() => {
                                window.location.href = '/reg-lg/reg-lg/src/main/resources/static/clients.html';
                            }, 1000)
                        }
                    })
            },
            // 使用公钥加密
            getEncrypt() {
                let encrypt = new JSEncrypt();
                encrypt.setPublicKey(this.publicKey);
                // 将密码加密
                this.password = encrypt.encrypt(this.password);
            },
            // 获取公钥
            getPublicKey() {
                axios.get("http://localhost:80/publicKey")
                    .then(res => {
                        this.publicKeyUUID = res.data.data.publicKeyUUID;
                        this.publicKey = res.data.data.publicKey;
                    })
            },
            // 清理 localStorage
            clearLocalStorage() {
                let item = localStorage.getItem("ifShowVerCode");
                if (item !== null) {
                    localStorage.removeItem("ifShowVerCode");
                }
            },
            getCaptcha() {
                // 决定是否显示输入验证码
                let item = localStorage.getItem("ifShowVerCode");
                if (item !== null) {
                    axios.get("http://localhost:80/captcha")
                        .then(res => {
                            this.captchaUUID = res.data.data.captchaUUID;
                            this.captcha = res.data.data.images;
                        })
                    this.ifShowVerCode = true;
                }
            },
            // 发送用户名登录的请求
            logByUsername() {
                // 先使用公钥加密
                this.getEncrypt();
                let item = localStorage.getItem("ifShowVerCode");
                let verCode = this.verCode;
                if (item === null) {
                    verCode = 'empty';
                }
                axios.post("http://localhost:80/userInfo/logByUsername", {
                    publicKeyUUID: this.publicKeyUUID,
                    captchaUUID: this.captchaUUID,
                    username: this.username,
                    password: this.password,
                    verCode: verCode,
                })
                    .then(res => {
                        let code = res.data.code;
                        console.log(code);
                        let message = res.data.message;
                        console.log(message);
                        // 当登陆成功时
                        if (code === 20000) {
                            this.showMessages('登陆成功', 'success');
                            this.clearLocalStorage();
                            // 将 token 存入 localStorage
                            let token = res.data.data.token;
                            console.log(token);
                            localStorage.setItem('userLogging', token);
                            // 跳转页面
                            setTimeout(() => {
                                window.location.href = '/reg-lg/reg-lg/src/main/resources/static/clients.html';
                            }, 1000);
                        } else if (code === 55555) { // 当异地登录时
                            this.showMessages(message, 'warning');
                        } else {
                            // 登录失败后再次登录需要重新输入验证码
                            localStorage.setItem("ifShowVerCode", "show");
                            this.showMessages(message, 'error');
                            window.location.href = '/reg-lg/reg-lg/src/main/resources/static/login.html';
                        }
                    })
            },
        },
        created() {
            this.getPublicKey();
            this.getCaptcha();
            this.preLogin();
        }
    })
</script>

</body>

</html>
